<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ionic JS Test</title>
    <base href="./">
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
        }
        .test-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-size: 14px;
        }
        .success {
            background: #d4edda;
            color: #155724;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
        }
        .loading {
            background: #fff3cd;
            color: #856404;
        }
        .progress {
            width: 100%;
            height: 20px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-bar {
            height: 100%;
            background: #007bff;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>Ionic JavaScript 测试</h1>
        
        <div class="status success">✓ CSS 加载成功</div>
        
        <div class="progress">
            <div class="progress-bar" id="progress" style="width: 10%"></div>
        </div>
        
        <div id="js-status" class="status loading">⏳ 开始加载 JavaScript...</div>
        
        <div id="test-results">
            <h3>测试结果：</h3>
            <div id="results-list"></div>
        </div>
    </div>
    
    <script>
        console.log('Ionic JS test page loaded');
        
        let progress = 10;
        const progressBar = document.getElementById('progress');
        const statusDiv = document.getElementById('js-status');
        const resultsList = document.getElementById('results-list');
        
        function updateProgress(percent, message) {
            progress = percent;
            progressBar.style.width = percent + '%';
            statusDiv.innerHTML = message;
            console.log('Progress: ' + percent + '% - ' + message);
        }
        
        function addResult(message, isSuccess = true) {
            const div = document.createElement('div');
            div.className = 'status ' + (isSuccess ? 'success' : 'error');
            div.innerHTML = (isSuccess ? '✓ ' : '✗ ') + message;
            resultsList.appendChild(div);
        }
        
        function loadScript(src, name) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.onload = () => {
                    addResult(name + ' 加载成功');
                    resolve();
                };
                script.onerror = (error) => {
                    addResult(name + ' 加载失败: ' + error.message, false);
                    reject(error);
                };
                document.head.appendChild(script);
            });
        }
        
        async function testJavaScript() {
            try {
                updateProgress(20, '⏳ 加载 Ionic 核心库...');
                await loadScript('./ionic/js/chunk-ionic.b2c76632.js', 'Ionic 核心库');
                
                updateProgress(40, '⏳ 加载 Vendors 库...');
                await loadScript('./ionic/js/chunk-vendors.9a24fe1a.js', 'Vendors 库');
                
                updateProgress(60, '⏳ 加载应用主文件...');
                await loadScript('./ionic/js/app.39054f79.js', '应用主文件');
                
                updateProgress(80, '⏳ 检测 Ionic 组件...');
                
                // 等待一段时间让 Ionic 初始化
                setTimeout(() => {
                    // 检测 Ionic 是否可用
                    if (typeof window.Ionic !== 'undefined') {
                        addResult('Ionic 全局对象可用');
                        updateProgress(90, '⏳ 测试 Ionic 功能...');
                        
                        // 尝试创建一个简单的 Ionic 元素
                        try {
                            const ionButton = document.createElement('ion-button');
                            ionButton.innerHTML = '测试按钮';
                            document.body.appendChild(ionButton);
                            addResult('Ionic 组件创建成功');
                            updateProgress(100, '✓ 所有测试完成！');
                            statusDiv.className = 'status success';
                        } catch (e) {
                            addResult('Ionic 组件创建失败: ' + e.message, false);
                            updateProgress(95, '⚠ 部分功能异常');
                            statusDiv.className = 'status error';
                        }
                    } else {
                        addResult('Ionic 全局对象不可用', false);
                        updateProgress(85, '⚠ Ionic 初始化失败');
                        statusDiv.className = 'status error';
                    }
                }, 2000);
                
            } catch (error) {
                addResult('JavaScript 加载失败: ' + error.message, false);
                updateProgress(progress, '✗ 加载失败');
                statusDiv.className = 'status error';
                console.error('JS loading error:', error);
            }
        }
        
        // 页面加载完成后开始测试
        window.onload = function() {
            setTimeout(testJavaScript, 1000);
        };
    </script>
</body>
</html>